<template>
    <el-dialog v-model="showPop" width="500" append-to-body>
        <template #header>
            <div v-if="!richTitle"></div>
            <div v-else class="text-lg text-center font-medium">
                {{ richTitle }}
            </div>
        </template>
        <el-scrollbar max-height="400px">
            <div class="richText" v-html="richContent"></div>
        </el-scrollbar>
    </el-dialog>
</template>

<script lang="ts" setup>
import useAppStore from '~/stores/app'
import { cacheEnum } from '~/enums/cache'

const appStore = useAppStore()

// 弹窗状态
const showPop = ref<boolean>(false)

// 公告数据
const isOpen = computed(() => appStore.getBulletinConfig.is_open)
const richTitle = computed(() => appStore.getBulletinConfig.title)
const richContent = computed(() => appStore.getBulletinConfig.content)

/**
 * 弹窗处理
 *
 * @param {boolean} value
 * @author zero
 */
const shouldShowNotice = (value: boolean) => {
    const lastVisitTime = useCookie(cacheEnum.BULLETIN_KEY)
    const currentTime = new Date().toDateString()
    const isNewDay = !lastVisitTime.value || lastVisitTime.value !== currentTime
    if (isNewDay && value) {
        lastVisitTime.value = currentTime
    }
    return isNewDay
}

watch(
    () => isOpen.value,
    (val) => {
        if (val && shouldShowNotice(val)) {
            showPop.value = true
        }
    },
    {
        deep: true,
        immediate: true
    }
)
</script>

<style lang="scss" scoped>
:deep(.richText) {
    img {
        display: inline-block;
    }
}
</style>
